<template>
  <div class="p-8 lg:p-10 space-y-8">
    <div class="flex items-center gap-4">
      <h3 class="text-3xl font-bold text-gray-900">回复</h3>
      <div class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-full">
        <svg class="w-5 h-5 text-indigo-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span class="font-semibold text-indigo-700">{{ replyCount }}</span>
      </div>
    </div>
    
    <!-- 评论表单 -->
    <div v-if="!isLocked" class="relative p-8 bg-gradient-to-br from-gray-50/80 to-blue-50/80 rounded-2xl border border-gray-200/50 shadow-sm">
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-t-2xl" />
      
      <div class="space-y-6">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
            {{ (useUserStore().user?.name?.charAt(0)) || 'U' }}
          </div>
          <div>
            <h4 class="text-lg font-semibold text-gray-900">发表评论</h4>
            <p class="text-sm text-gray-500">分享你的想法和见解</p>
          </div>
        </div>
        
        <textarea 
          v-model="commentContent"
          class="w-full p-4 border-2 border-gray-200 rounded-xl text-base leading-relaxed resize-y min-h-[120px] transition-all duration-300 focus:outline-none focus:border-indigo-500 focus:shadow-lg bg-white/80 backdrop-blur-sm placeholder-gray-400"
          placeholder="写下你的评论，与作者和其他读者交流..."
          rows="5"
        />
        
        <div class="flex justify-end">
          <button 
            class="group flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl font-semibold hover:from-indigo-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5"
            :disabled="!commentContent.trim() || submitting"
            @click="$emit('submitComment', commentContent)"
          >
            <svg v-if="!submitting" class="w-5 h-5 transition-transform duration-300 group-hover:rotate-12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
            </svg>
            <div v-else class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
            {{ submitting ? '提交中...' : '发表评论' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="space-y-6">
      <div v-if="commentsLoading" class="flex flex-col items-center justify-center py-16 text-gray-500">
        <div class="relative mb-6">
          <div class="w-12 h-12 border-4 border-gray-200 border-t-indigo-500 rounded-full animate-spin" />
          <div class="absolute inset-0 w-12 h-12 border-4 border-transparent border-r-purple-400 rounded-full animate-spin animate-reverse" style="animation-delay: 0.5s;" />
        </div>
        <p class="text-lg font-medium text-gray-700">加载评论中...</p>
      </div>
      
      <div v-else-if="comments.length === 0" class="text-center py-16">
        <div class="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg class="w-10 h-10 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
          </svg>
        </div>
        <h4 class="text-xl font-semibold text-gray-900 mb-2">暂无评论</h4>
        <p class="text-gray-600">成为第一个评论的人，分享你的想法吧！</p>
      </div>
      
      <div v-else class="space-y-6">
        <div 
          v-for="comment in comments" 
          :key="comment.id"
          class="group bg-white/60 backdrop-blur-sm rounded-2xl border border-gray-200/50 overflow-hidden hover:bg-white/80 hover:shadow-lg transition-all duration-300"
        >
          <div class="p-6 lg:p-8">
            <div class="flex flex-col lg:flex-row justify-between items-start gap-4 mb-4">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
                  {{ (comment.author?.name || '匿名用户').charAt(0) }}
                </div>
                <div>
                  <div class="font-semibold text-gray-900 text-lg">
                    {{ comment.author?.name || '匿名用户' }}
                  </div>
                  <div class="text-gray-500 text-sm">
                    {{ formatTime(comment.createdAt) }}
                  </div>
                </div>
              </div>
              
              <div class="flex flex-wrap gap-3">
                <button 
                  class="group/like flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-pink-50 to-rose-50 border-2 border-pink-200 rounded-xl hover:from-pink-100 hover:to-rose-100 hover:border-pink-300 transition-all duration-300"
                  :class="{ '!bg-gradient-to-r !from-pink-500 !to-rose-500 !border-pink-500 !text-white': comment.isLiked }"
                  @click="$emit('toggleCommentLike', comment)"
                >
                  <svg class="w-4 h-4 transition-transform duration-300 group-hover/like:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                  </svg>
                  <span class="font-medium">{{ comment.likeCount }}</span>
                </button>
                
                <button 
                  v-if="!isLocked"
                  class="group/reply flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-xl hover:from-blue-100 hover:to-indigo-100 hover:border-blue-300 transition-all duration-300"
                  @click="startReply(comment.id)"
                >
                  <svg class="w-4 h-4 transition-transform duration-300 group-hover/reply:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                  </svg>
                  <span class="font-medium text-blue-700">回复</span>
                </button>
                
                <div v-if="canEditReply(comment)" class="flex gap-2">
                  <button 
                    class="group/edit px-3 py-2 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl hover:from-green-100 hover:to-emerald-100 hover:border-green-300 transition-all duration-300"
                    @click="$emit('editReply', comment)"
                  >
                    <svg class="w-4 h-4 text-green-600 transition-transform duration-300 group-hover/edit:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                  </button>
                  <button 
                    class="group/delete px-3 py-2 bg-gradient-to-r from-red-50 to-rose-50 border-2 border-red-200 rounded-xl hover:from-red-100 hover:to-rose-100 hover:border-red-300 transition-all duration-300"
                    @click="$emit('deleteReply', comment.id)"
                  >
                    <svg class="w-4 h-4 text-red-600 transition-transform duration-300 group-hover/delete:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="prose prose-lg max-w-none text-gray-900 leading-relaxed prose-headings:text-gray-900 prose-a:text-indigo-600 prose-strong:text-gray-900 prose-code:text-indigo-600" v-html="comment.content" />
            
            <!-- 回复表单 -->
            <div v-if="replyingTo === comment.id" class="mt-6 p-6 bg-gradient-to-br from-blue-50/80 to-indigo-50/80 rounded-xl border border-blue-200/50">
              <div class="space-y-4">
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                    {{ (useUserStore().user?.name?.charAt(0)) || 'U' }}
                  </div>
                  <div>
                    <h5 class="font-semibold text-gray-900">回复 {{ comment.author?.name || '匿名用户' }}</h5>
                    <p class="text-sm text-gray-500">分享你的想法</p>
                  </div>
                </div>
                
                <textarea 
                  v-model="replyContent"
                  class="w-full p-4 border-2 border-blue-200 rounded-xl text-base leading-relaxed resize-y min-h-[100px] focus:outline-none focus:border-blue-400 focus:shadow-lg bg-white/80 backdrop-blur-sm placeholder-gray-400"
                  placeholder="写下你的回复..."
                  rows="4"
                />
                
                <div class="flex justify-end gap-3">
                  <button 
                    class="px-4 py-2 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-all duration-300"
                    @click="cancelReply"
                  >
                    取消
                  </button>
                  <button 
                    class="group flex items-center gap-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg font-medium hover:from-blue-600 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 shadow-lg hover:shadow-xl"
                    :disabled="!replyContent.trim() || replySubmitting"
                    @click="submitReply"
                  >
                    <svg v-if="!replySubmitting" class="w-4 h-4 transition-transform duration-300 group-hover:rotate-12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                    <div v-else class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    {{ replySubmitting ? '提交中...' : '发表回复' }}
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 显示回复列表 -->
            <div v-if="comment.replies && comment.replies.length > 0" class="mt-6 space-y-4">
              <div 
                v-for="reply in comment.replies" 
                :key="reply.id"
                class="ml-8 p-5 bg-gradient-to-br from-gray-50/80 to-blue-50/80 rounded-xl border-l-4 border-blue-500 shadow-sm hover:shadow-md transition-all duration-300"
              >
                <div class="flex flex-col sm:flex-row justify-between items-start gap-3 mb-3">
                  <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                      {{ (reply.author?.name || '匿名用户').charAt(0) }}
                    </div>
                    <div>
                      <div class="font-semibold text-gray-900 text-sm">
                        {{ reply.author?.name || '匿名用户' }}
                      </div>
                      <div class="text-gray-500 text-xs">
                        {{ formatTime(reply.createdAt) }}
                      </div>
                    </div>
                  </div>
                  
                  <div class="flex gap-2">
                    <button 
                      class="flex items-center gap-1 px-3 py-1.5 bg-gradient-to-r from-pink-50 to-rose-50 border border-pink-200 rounded-lg text-xs hover:from-pink-100 hover:to-rose-100 hover:border-pink-300 transition-all duration-300"
                      :class="{ '!bg-gradient-to-r !from-pink-500 !to-rose-500 !border-pink-500 !text-white': reply.isLiked }"
                      @click="$emit('toggleCommentLike', reply)"
                    >
                      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                      </svg>
                      {{ reply.likeCount }}
                    </button>
                    
                    <div v-if="canEditReply(reply)" class="flex gap-1">
                      <button 
                        class="px-2 py-1 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded text-xs hover:from-green-100 hover:to-emerald-100 hover:border-green-300 transition-all duration-300"
                        @click="$emit('editReply', reply)"
                      >
                        <svg class="w-3 h-3 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                      </button>
                      <button 
                        class="px-2 py-1 bg-gradient-to-r from-red-50 to-rose-50 border border-red-200 rounded text-xs hover:from-red-100 hover:to-rose-100 hover:border-red-300 transition-all duration-300"
                        @click="$emit('deleteReply', reply.id)"
                      >
                        <svg class="w-3 h-3 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
                
                <div class="prose prose-sm max-w-none text-gray-900 leading-relaxed prose-headings:text-gray-900 prose-a:text-indigo-600 prose-strong:text-gray-900 prose-code:text-indigo-600" v-html="reply.content" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Comment } from '~/types/post'

interface Props {
  comments: Comment[]
  commentsLoading: boolean
  replyCount: number
  isLocked: boolean
  submitting: boolean
  replySubmitting: boolean
}

const _props = defineProps<Props>()
const emit = defineEmits<{
  submitComment: [content: string]
  toggleCommentLike: [comment: Comment]
  editReply: [reply: Comment]
  deleteReply: [commentId: number]
  submitReply: [content: string, parentId: number]
}>()

const commentContent = ref('')
const replyContent = ref('')
const replyingTo = ref<number | null>(null)

const canEditReply = (reply: Comment) => {
  const userStore = useUserStore()
  return reply.authorId === userStore.user?.id || (userStore.user?.authority && userStore.user.authority >= 2)
}

const startReply = (commentId: number) => {
  replyingTo.value = commentId
  replyContent.value = ''
}

const cancelReply = () => {
  replyingTo.value = null
  replyContent.value = ''
}

const submitReply = () => {
  if (!replyContent.value.trim() || !replyingTo.value) return
  emit('submitReply', replyContent.value, replyingTo.value)
  replyContent.value = ''
  replyingTo.value = null
}

const formatTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}
</script>
